<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row>
            <el-col :span="12">
              <h3>公告管理</h3>
            </el-col>
            <el-col :span="12">
              <el-button plain style="float: right" type="primary" @click="addAnnouncement ">
                添加公告
              </el-button>
            </el-col>
          </el-row>
        </div>

        <el-table :data="article">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form class="demo-table-expand" inline label-position="left">
                <el-form-item label="内容：">
                  <span>{{ props.row.content }}</span>
                </el-form-item>
                <br>
                <span style="float: right">
                <el-button plain type="primary" @click="rowData = props.row; visible(); mode ='修改' ">修改内容</el-button>
                <el-button plain type="danger" @click="id = props.row.uuid; announcementDel()">删除内容</el-button>
              </span>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="作者" prop="author"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="内容" prop="intercept"></el-table-column>
        </el-table>
      </el-card>
    </el-main>
    <el-footer>
      <el-pagination
          :current-page.sync="paging.page"
          :page-size.sync="paging.size"
          :total="total"
          background
          layout="prev, pager, next,jumper"
          @current-change="announcementPage"
      >
      </el-pagination>
    </el-footer>
    <el-dialog
        :title="mode + '公告'"
        :visible.sync="addVisible"
    >
      <dialog-announcement :mode="mode" :row="rowData" @success="announcementPage();addVisible = false;"/>
    </el-dialog>
  </el-container>
</template>

<script>
import DialogAnnouncement from "./announcementForm";
import {delectAnnouncement, queryAnnouncement} from "../../network/announcementApi";

export default {
  name: "announcement",
  components: {DialogAnnouncement},
  data() {
    return {
      paging: {
        page: 1,
        size: 5,
        start: null,
        end: null
      },

      article: null,
      total: null,
      addVisible: false,
      rowData: null,
      id: null,
      mode: null,
    }
  },
  methods: {

    addAnnouncement() {
      this.mode = '添加'
      this.rowData = {};
      this.addVisible = true;

    },

    visible() {
      this.addVisible = true;
    },
    announcementPage() {
      queryAnnouncement(this.paging).then(res => {
        this.article = res.data.records;
        this.total = res.data.total;
        let str = res.data.records;
        for (let i = 0; i < str.length; i++) {
          str[i].intercept = str[i].content.substring(0, 12) + "..."
        }
      })
    },
    announcementDel() {
      this.$confirm('确定删除此公告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delectAnnouncement(this.id).then(res => {
          this.announcementPage();
          console.log(res)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  mounted() {
    this.announcementPage();
    console.log(this.rowData)
  }
}
</script>

<style scoped>
</style>